<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
        integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <script src="../node_modules/vue/dist/vue.js"></script>
  <script src="../node_modules/vue-resource/dist/vue-resource.js"></script>
</head>
<body>
<div id="app">
  <h1>vue-resource 使用，其实就是http</h1>
  <a href="javascript:;" class="btn btn-primary" @click="get">Get请求</a>
  <a href="javascript:;" class="btn btn-primary" v-on:click="post">Post请求</a>
  <a href="javascript:;" class="btn btn-primary" @click="http">http请求</a>
  <br>
  <span>{{msg}}</span>
</div>
<script>
  new Vue({
    el: "#app",
    data: {
      msg: "",
    },
    mounted:function(){
      Vue.http.interceptors.push(function (request,next) {//http全局拦截器
        console.log("request init");
        next(function (response) {
          console.log("response init");
          return response
        })
      })
    },
    http:{
      root:"http://localhost:63342/vue-mall/",//http请求的前缀，例如下面package.json，会拼接成为$root/package.json
    },
    methods: {
      get: function () {
        this.$http.get("package.json", {
          params: {
            userId: 1,
          },
          header: {
            token: "abc"
          }
        }).then(res => {
            this.msg = res.data
          },
          error => {
            this.msg = error
          }
        )
      },
      post:function () {
        this.$http.post("package1.json",{
          userId:2,
        },{
          headers:{
            token2:"efg",
          }
        }).then(res=>{
          this.msg = res.data
        },error=>{
          this.msg = error
        })
      },
      http:function () {
        this.$http({
          url: "package.json",
          headers:{
            token3:"ljk",
          },
          params:{
            userId:3,
          },
          timeout:50000,//毫秒
          before: function () {
            console.log("before")
          },
          after:function () {
            console.log("after")
          }
        }).then(res=>{
          this.msg = res.data
        },error=>{
          this.msg = error
        })
      }
    }
  })
</script>
</body>
</html>
